<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2022-01-27 08:39:50
 * @LastEditors: GGB
 * @LastEditTime: 2022-01-27 08:57:51
-->


<template>
  <div id="cesiumContainer"></div>
</template>
<script setup>

import * as Cesium from 'cesium';
import { onMounted } from 'vue';

onMounted(()=>{

// const custom=new Cesium.ArcGisMapServerImageryProvider({
//   url:'//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServier'
// })
const viewer = new Cesium.Viewer('cesiumContainer',{
  baseLayerPicker:false,
  // imageryProvider:custom,
  terrainProvider:Cesium.createWorldTerrain({
    requestWaterMask:true,
    requestVertexNormals:true,
  })
});
viewer.camera.setView({
  destination:Cesium.Cartesian3.fromDegrees(106.669819,26.55758,5000)
})

})
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
   width:100%;
  height: 100%;
  margin:0;
  padding:0;
  overflow: hidden;

  /* margin-top: 60px; */
}
html,body,#cesiumContainer{
  width:100%;
  height: 100%;
  margin:0;
  padding:0;
  overflow: hidden;
}
</style>
